<template>
    <div>
        <el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="1100px">
            <template #header>
                <div style="color: #fff">
                    <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
                    </el-icon>
                    <span> {{ props.title }} </span>
                </div>
            </template>
            <!-- 展示该仓库的信息 -->
            <el-tabs>
                <el-form :model="state.ruleForm" label-width="auto">
                    <el-row :gutter="35">
                        <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6" class="mb20">
                            <el-form-item label="编号">
                                <el-input v-model="state.ruleForm.id" clearable disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6" class="mb20">
                            <el-form-item label="名称">
                                <el-input v-model="state.ruleForm.name" clearable disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6" class="mb20">
                            <el-form-item label="所属仓库">
                                <el-input v-model="state.ruleForm.belongWarehouse" clearable disabled />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6" class="mb20">
                            <el-form-item label="状态">
                                <div class="radius" v-if="state.ruleForm.status === 1">启用</div>
                                <div class="radius" v-else>停用</div>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                            <el-form-item label="备注">
                                <el-input v-model="state.ruleForm.remark" placeholder="地址" clearable type="textarea"
                                    disabled />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-tabs>
            <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
                <el-form :model="state.queryParams" ref="queryForm" :inline="true">
                    <el-form-item label="名称：">
                        <el-input v-model="state.queryParams.name" placeholder="机构名称" clearable />
                    </el-form-item>
                    <el-form-item label="编号：">
                        <el-input v-model="state.queryParams.code" placeholder="机构编码" clearable />
                    </el-form-item>
                    <el-form-item label="状态：">
                        <el-radio-group v-model="state.queryParams.status" class="ml-4"
                            style="display: flex;flex-flow: nowrap;">
                            <el-radio :label="1" style="width: 30px;">启用</el-radio>
                            <el-radio :label="0">停用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button-group style="margin-left: 45px;">
                            <el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysOrg:list'">
                                查询 </el-button>
                            <el-button icon="ele-Edit" size="small" text type="primary" v-auth="'sysOrg:delete'"> 删除
                            </el-button>
                        </el-button-group>
                        <el-button type="primary" icon="ele-Plus" @click="openAddOrg" v-auth="'sysOrg:add'"
                            style="margin-left: 50px;"> 新增
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-card>
            <el-card class="full-table" shadow="hover" style="margin-top: 8px">
                <el-table :data="state.currentChildrenData" style="width: 100%" v-loading="state.loading" row-key="id"
                    default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border>
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" :index="indexMethod" label="序号" align="center"></el-table-column>
                    <el-table-column prop="id" label="库位编号" align="center" show-overflow-tooltip />
                    <el-table-column prop="name" label="库位名称" header-align="center" align="center" show-overflow-tooltip />
                    <!-- <el-table-column prop="isOccupied" label="占用" header-align="center" align="center" show-overflow-tooltip /> -->
                    <el-table-column label="占用" width="70" align="center" show-overflow-tooltip>
                        <template #default="scope">
                            <el-tag type="success" v-if="scope.row.isOccupied === 1">占用</el-tag>
                            <el-tag type="danger" v-else>未占用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="70" align="center" show-overflow-tooltip>
                        <template #default="scope">
                            <el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
                            <el-tag type="danger" v-else>禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="80" fixed="right" align="center" show-overflow-tooltip>
                        <template #default="scope">
                            <el-button icon="ele-Edit" size="small" text type="primary" @click="delOne(scope.row)"
                                v-auth="'sysOrg:delete'"> 删除 </el-button>
                            <!-- <el-button icon="ele-Delete" size="small" text type="danger" @click="delOrg(scope.row)" v-auth="'sysOrg:delete'"> 删除 </el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <el-pagination v-model:current-page="state.queryParams.pageNum" v-model:page-size="state.queryParams.pageSize"
                :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="11"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" :small="true" />
            <EditRelevancy ref="editRelevancyRef" :title="state.editTitle" :changeMsg="changeMsg"
                @handleQuery="handleQuery" />
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="EditLocation">
import { onMounted, reactive, ref } from 'vue';

import { getAPI } from '/@/utils/axios-utils';
import { SysOrgApi, SysDictDataApi } from '/@/api-services/api';
import { Area, UpdateOrgInput } from '/@/api-services/models';
import { AddAreaInput } from '/@/api-services/models/add-area-input';
// import { ElMessageBox } from 'element-plus/es/components/message-box';
// import ElMessage from 'element-plus/es/components/message';
import EditRelevancy from "./editRelevancy.vue";

const props = defineProps({
    title: String,
    a: Object
});
const editRelevancyRef = ref<InstanceType<typeof EditRelevancy>>();
const emits = defineEmits(['handleQuery']);
const ruleFormRef = ref();
const state = reactive({
    isShowDialog: false,
    ruleForm: {} as AddAreaInput,
    orgTypeList: [] as any,
    loading: false,
    currentChildrenData: [] as any,
    editTitle: '',
    queryParams: {
        id: -1,
        name: undefined,
        code: undefined,
        status: undefined,
        pageNum: 1,//当前页
        pageSize: 10
    },
parm:[]
});
onMounted(() => {
    handleQuery();
});
// let resDicData = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('org_type');
// state.orgTypeList = resDicData.data.result;
const indexMethod = (index: number) => {
    return (state.queryParams.pageNum - 1) * state.queryParams.pageSize + index + 1;
}
const openAddOrg = () => {
    state.editTitle = '关联库位';
    editRelevancyRef.value?.openDialog({ status: 1 });
};
// 打开弹窗
const openDialog = (row: any) => {
    state.ruleForm = JSON.parse(JSON.stringify(row));
    state.isShowDialog = true;
};
const unique = (arr: any) => {
    const res = new Map()
    return arr.filter((a: { id: any; name: any; }) => !res.has(a.id) && res.set(a.id, 1) && !res.has(a.name) && res.set(a.name, 1))
}
const changeMsg = (arr: any) => {
    //拿到从子组件传来的参数，并对合并的数组去重
    state.parm=arr;
    state.currentChildrenData = unique(state.currentChildrenData.concat(arr))
}
// const reactChange=(val: any)=>{
//     console.log(val);
//     state.currentChildrenData=state.currentChildrenData.push(val);
// }
const handleSizeChange = (val: number) => {
    state.queryParams.pageSize = val;
    handleQuery();
};
const handleCurrentChange = (newVal: any) => {
    state.queryParams.pageNum = newVal;
    handleQuery();
};
// 关闭弹窗
const closeDialog = () => {
    emits('handleQuery', true);
    state.isShowDialog = false;
};
// 取消
const cancel = () => {
    state.isShowDialog = false;
};
const delOne = (row: any) => {
    console.log(row);
};
const handleQuery = () => {
    state.loading = true;
    // var res = await getAPI(SysOrgApi).apiSysOrgListGet(state.queryParams.id, state.queryParams.name, state.queryParams.code, state.queryParams.orgType);
    // state.currentChildrenData = res.data.result ?? [];
    state.currentChildrenData=[{ "id": 111008, "name": "名称1", "isOccupied": 1,"status": 1 }]
    changeMsg(state.parm);
    state.loading = false;
    
};
const delOrg = (row: any) => {
    // ElMessageBox.confirm(`确定删除机构：【${row.name}】?`, '提示', {
    // 	confirmButtonText: '确定',
    // 	cancelButtonText: '取消',
    // 	type: 'warning',
    // })
    // 	.then(async () => {
    // 		await getAPI(SysOrgApi).apiSysOrgDeletePost({ id: row.id });
    // 		ElMessage.success('删除成功');
    // 		handleQuery(true);
    // 	})
    // 	.catch(() => {});
    console.log("111");

};
// 导出对象
defineExpose({ openDialog });
</script>
<style scoped lang="scss">
.radius {
    height: 22px;
    width: 164.75px;
    border: 1px solid var(--el-border-color);
    border-radius: 5px;
    background-color: #ddd;
    padding-left: 5px;
    padding-top: -4px;
    color: #afabb9;
    background-color: #f5f7fa;
}
</style>